<template>
	<view>
		<u-navbar :is-fixed="false" back-icon-color="#1e272e" :background="{background: '#f7f8fa'}"></u-navbar>
		<view class="login-title">密码登录</view>
		<!--  -->
		<view class="content">
			<input class="input-box" :inputBorder="false" v-model="username" placeholder="请输入手机号/用户名"></input>
			<input type="password" class="input-box" :inputBorder="false" v-model="password" placeholder="请输入密码"></input>
			<view class="captcha-box" v-if="captchaBase64">
				<image class="captcha-img" @click="createCaptcha" :src="captchaBase64" mode="widthFix"></image>
				<input type="text" class="input-box captcha" :inputBorder="false" v-model="captcha" placeholder="请输入验证码"></input>
			</view>
			<button class="send-btn" :disabled="!canLogin" :type="canLogin?'primary':'default'"
				@click="pwdLogin">登录</button>
			<!-- 忘记密码 -->
			<view class="auth-box">
				<text class="link" @click="toRetrievePwd">忘记密码</text>
				<text class="link" @click="toRegister">注册账号</text>
			</view>
			<!-- 服务与隐私 -->
			<uni-agreements class="p-t-15" @setAgree="agree = $event"></uni-agreements>
			<!-- 登录方式 -->
			<uni-quick-login :agree="agree" ref="uniQuickLogin"></uni-quick-login>
		</view>
		<!--  -->
	</view>
</template>

<script>
	import mixin from '../common/login-page.mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				"password": "",
				"username": "",
				"agree": false,
				"captchaBase64":"",
				"captcha":"",
				"rotate":true
			}
		},
		computed: {
			canLogin() {
				return this.username.length && this.isPwd;
			},
			isPwd() {
				return /^.{6,20}$/.test(this.password);
			},
			isPhone() {
				return /^1\d{10}$/.test(this.phone);
			},
		},
		methods: {
			// 页面跳转，找回密码
			toRetrievePwd() {
				uni.navigateTo({
					url: '../pwd-retrieve/pwd-retrieve?phoneNumber=' + (this.isPhone ? this.username : '') +
						'&phoneArea=' + this.currenPhoneArea
				})
			},
			/**
			 * 密码登录
			 */
			pwdLogin() {
				if (!this.agree) {
					return uni.showToast({
						title: '你未同意隐私政策协议',
						icon: 'none'
					});
				}
				uni.showLoading({
					title:"登录中"
				})
				// 下边是可以登录
				uniCloud.callFunction({
					name:'uni-id-cf',
					data:{
						action:'login',
						params:{
							"username": this.username,
							"password": this.password,
							"captcha":this.captcha
						},
					},
					success: ({result}) => {
						uni.hideLoading()
						console.log(result);
						if (result.code === 0) {
							this.loginSuccess(result)
						} else {
							if (result.needCaptcha) {
								uni.showToast({
									title: result.msg,
									icon: 'none'
								});
								this.createCaptcha()
							}else{
								uni.showModal({
									title: '错误',
									content: result.msg,
									showCancel: false,
									confirmText: '知道了'
								});
							}
						}
					}
				})
				
				// this.-request('uni-id-cf/login', {
				// 	"username": this.username,
				// 	"password": this.password,
				// 	"captcha":this.captcha
				// }, result => {
				// 	console.log(result);
				// 	if (result.code === 0) {
				// 		this.loginSuccess(result)
				// 	} else {
				// 		if (result.needCaptcha) {
				// 			uni.showToast({
				// 				title: result.msg,
				// 				icon: 'none'
				// 			});
				// 			this.createCaptcha()
				// 		}else{
				// 			uni.showModal({
				// 				title: '错误',
				// 				content: result.msg,
				// 				showCancel: false,
				// 				confirmText: '知道了'
				// 			});
				// 		}
				// 	}
				// })
			},
			createCaptcha(){
				// this.-request(
				// 'uni-id-cf/createCaptcha', {
				// 	scene: "login"
				// },
				// result => {
				// 	if (result.code === 0) {
				// 		this.captchaBase64 = result.captchaBase64
				// 	}
				// })
				
				uniCloud.callFunction({
					name:'uni-id-cf',
					data:{
						action:'createCaptcha',
						params:{
							scene: "login"
						},
					},
					success: ({result}) => {
						if (result.code === 0) {
							this.captchaBase64 = result.captchaBase64
						}
					}
				})
			},
			/* 前往注册 */
			toRegister(e) {
				console.log(e);
				uni.navigateTo({
					url: '../register/register'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import url("../common/login-page.css");
	@import url("../common/FatFatMeng-loginStyle.css");
	.auth-box {
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20px;
	}
	
	.auth-box .link {
		font-size: 26rpx;
	}
	
	.login-text-sub {
		color: #8a8f8b;
	}
	
	.toRegister {
		margin-top: 80px;
		width: 600rpx;
	}
	.captcha-box{
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.captcha-img{
		margin:15px 15px 0 0;
		width: 250rpx;
	}
	.captcha{
		width: 350rpx;
	}
	
	
</style>
